<script lang="ts" setup>
import { ref } from "vue";
import Echart from "@/components/Echart.vue";
import * as echarts from "echarts";
let colorsarr = [
  "#2d4796",
  "#0369bb",
  "#02a4bc",
  "#07b7a0",
  "#9b951d",
  "#03526f",
  "#8f570c",
];
const data = [220, 182, 191, 234, 290, 330, 100].map((item, index) => {
  return {
    value: item,
    itemStyle: {
      color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
        {
          offset: 0,
          color: colorsarr[index],
        },
        {
          offset: 0.5,
          color: `${colorsarr[index]}`,
        },
        {
          offset: 1,
          color: `${colorsarr[index]}80`,
        },
      ]),
    },
    label: {
      color: "#fff",
      fontSize: 12,
    },
  };
});

const option: any = ref({});
var xdata = [
  "土地",
  "新筑股份",
  "财产保险",
  "发展投诚",
  "轨道投资",
  "新能源",
  "通讯",
];

let indexColor = 0;

option.value = {
  tooltip: {
    trigger: "axis",
    axisPointer: {
      type: "shadow",
    },

    nameTextStyle: {
      
    },
    
    formatter: function (params) {
      return params[0].name + "<br>" + "数量 ：" + params[0].value;
    },
  },
  // grid: {
  //   left: "4%",
  //   right: "4%",
  //   bottom: "3%",
  //   top: "15%",
  //   containLabel: true,
  // },
  grid: {
    left: "0%",
    right: "0%",
    bottom: "0%",
    top: "20%",
    containLabel: true,
  },
  xAxis: {
    data: xdata,
    triggerEvent: true,
    nameRotate: 45,

    // axisLabel:{
    //   rotate: 30, 
    // },
    axisTick: {
      show: false,
    },
    axisLine: {
      show: false,
    },
    axisLabel: {
      show: true,
      rotate: 45,
      interval: 0,
      textStyle: {
        fontSize: 12,
        color: "#fff",
      },
    },
  },
  yAxis: {
    triggerEvent: true,
    splitLine: {
      show: true,
      lineStyle: {
        color: "rgba(255,255,255,0.1)",
      },
    },
    axisTick: {
      show: false,
    },
    axisLine: {
      show: false,
    },
    axisLabel: {
      show: true,
      textStyle: {
        color: "#fff",
        fontSize: 12,
      },
    },
  },
  series: [
    {
      name: "数量",
      type: "pictorialBar",
      barCategoryGap: -10,
      symbol: "path://M0,10 L10,10 C5.5,10 5.5,5 5,0 C4.5,5 4.5,10 0,10 z",
      // itemStyle: {
      //   normal: {
      //     //渐变色
      //     color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
      //       {
      //         offset: 0,
      //         color: getColors(),
      //       },
      //       {
      //         offset: 0.5,
      //         color: "#02a4bc50",
      //       },
      //       {
      //         offset: 1,
      //         color: "#02a4bc30",
      //       },
      //     ]),
      //   },
      // },
      label: {
        normal: {
          show: true,
          position: "top",
          textStyle: {
            color: "#02a4bc",
            fontSize: 20,
          },
        },
      },
      data: data,
      z: 10,
    },
  ],
};

function getColors() {
  let color = colorsarr[0];
  console.log(color, 129);
  indexColor++;
  return color;
}
</script>
<template>
  <Echart
    style="width: 100%; height: 200px; margin-top: -30px"
    :options="option"
  ></Echart>
</template>
<style scoped></style>
